<template>
  <div class="dljjc_box3_x">
    <m-tabs
      :value="data.tab"
      @update:value="set.tabhand"
      :list="[
        { name: 'guild_list', title: '公会管理' },
        { name: 'guild_test', title: '公会测试' },
      ]"
    />
    <template v-if="data.tab == 'guild_list'">
      <div class="nbox1" v-if="cfg.qxpd(['bz']) == false">
        <n-result
          status="403"
          title="禁止访问"
          description="不允许普通用户访问，请使用管理组权限访问该页面"
        >
        </n-result>
      </div>
      <div class="nbox1" v-else>
        <component :is="set.comp.guild_list" />
      </div>
    </template>
    <template v-else-if="data.tab == 'guild_test'">
      <div class="nbox1" v-if="cfg.qxpd(['bz']) == false">
        <n-result
          status="403"
          title="禁止访问"
          description="不允许普通用户访问，请使用管理组权限访问该页面"
        >
        </n-result>
      </div>
      <div class="nbox1" v-else>
        <div class="boxgap">
          <div class="nbox2">
            <n-h4 prefix="bar"> 调试参数 </n-h4>
            <n-flex>
              <n-input-group>
                <n-input-group-label style="width: 120px"
                  >公会 sql_oid</n-input-group-label
                >
                <n-input v-model:value="data.test_id" placeholder="请输入公会ID" />
              </n-input-group>
              <n-input-group>
                <n-input-group-label style="width: 120px">账号 UID</n-input-group-label>
                <n-input v-model:value="data.test_uid" />
              </n-input-group>
              <n-input-group>
                <n-input-group-label style="width: 120px"
                  >账号 authkey</n-input-group-label
                >
                <n-input v-model:value="data.test_authkey" />
              </n-input-group>
            </n-flex>
          </div>

          <div class="nbox2"><n-h4 prefix="bar">数据测试</n-h4>你没有权限访问</div>

          <div class="nbox2"><n-h4 prefix="bar">服务器压力测试</n-h4>你没有权限访问</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  setup() {
    const set = {
      tabhand: async (id) => {
        data.tab = id;
        cfg.router.replace({
          query: {
            ...cfg.route.query,
            tab: id,
          },
        });
      },
      comp: {
        bind_sea: defineAsyncComponent(() => import(`./comp/gsql_bind_sea.vue`)),
        guild_list: defineAsyncComponent(() => import(`./comp/gsql_guild_list.vue`)),
      },
    };
    let data = reactive({
      tab: cfg.route.query.tab ?? "guild_list",
      test_id: "64e5ff886f63a97f111447d5",
      test_uid: cfg.user.uid,
      test_authkey: cfg.user.authkey,
    });

    onMounted(async () => {
      set.tabhand(data.tab);
    });
    return { data, cfg, set };
  },
};
</script>
